Dans la leçon précédente, nous avons créé l'interface utilisateur de notre application, principalement HTML et le succès avec la toute dernière
étape étant de masquer la fenêtre modale à travers laquelle soumettra un nouvel élément.
Dans cette leçon, nous allons donc connecter la logique de base pour afficher et masquer ce modèle et soumettre un
nouvel élément au processus principal.
Je vais fermer cette feuille de style pour le moment, car cela fonctionnera également dans cette application principalement des jeux d'esprit.
Gardez Meinhardt html ouvert pour une référence car nous allons sélectionner ces nœuds par ID et approches ouvertes.
Le script que nous lions ici chez Dodgiest est alors responsable de tout ce qui se passe sur
l'interface utilisateur ou le processus de rendu de la fenêtre principale.
Supprimez ceci et commencez par référencer certains des nœuds DOM qui ajouteront des écouteurs d'événements pour
permettre à show model equal document dot get aliment by IED.
Ce bouton ici avec une idée de modèle de spectacle.
Je vais dupliquer cela pour accélérer les choses.
Ce paramètre de fermeture du modèle récupère l'élément par ID pour fermer le modèle étant notre bouton d'annulation dans le popover du
milieu.
Et le modèle lui-même sélectionnant l'élément avec idy of model, OK, cela fera pour l'instant, nous voulons montrer le modèle lorsque show
model est cliqué et le masquer à nouveau.
Lorsque l'utilisateur clique sur le modèle de vêtements, j'ajoute un modèle de spectacle en écoutant d'abord le modèle de spectacle avec un écouteur d'événement publicitaire
pour un clic.
Donc, en cliquant sur le bouton plus dans l'en-tête de l'application, définissez la propriété d'affichage des points de style des modèles sur flex, ce qui, si vous vous
rappelez de DOCSIS principal, est la façon dont nous l'avions initialement avant de le cacher.
Ce paramètre JavaScript remplacera alors tous les styles de feuille de style car il sera appliqué en ligne.
C'est tout ce dont nous avons besoin pour montrer le modèle.
Donc, dupliquez tout cet auditeur, en le verrouillant ou en le cachant, en écoutant sur le modèle proche le bouton d'annulation
pour un clic à nouveau en définissant le style d'affichage des modaux sur aucun.
Nous pouvons tester cela.
Enregistrez les recharges de l'application.
Cliquez sur ce bouton plus et là nous avons le modèle cliquez sur Annuler con.
OK, c'est donc notre modèle qui fonctionne assez simple.
La prochaine étape que nous pouvons ajouter est d'en obtenir la valeur.
Vous êtes tous impliqués lorsque des éléments d'annonce ont été cliqués.
Comme auparavant, faites référence à ces notes de courrier électronique.
Ajouter un élément en sélectionnant le bouton avec un ID ajouter un élément.
Et l'élément, vous êtes toute l'entrée de texte pour l'élément, votre URL, qui a un identifiant de vous, Orell.
Et tous les nouveaux éléments ajoutés.
Définir un écouteur de clic sur cet élément d'ajout, bouton, élément d'ajout, pas d'ajout d'écouteur d'événement, cliquez avec un rappel
dans lequel vérifiera d'abord qu'une valeur est définie dans l'entrée de texte.
Vous pouvez bien sûr, aller plus loin en vérifiant si c'est un valide que vous êtes également.
Mais cela suffira pour le moment si l'élément Euroligue a une valeur, ce qui signifie que c'est beaucoup de vérité qui a de la valeur pour le
moment.
Enregistrez ce test T.
Ouvrez le modal.
Mon domaine dot com.
Cliquez, ajoutez un élément, et là nous voyons la valeur enregistrée dans la console, donc l'interface utilisateur de base de
ce modèle est maintenant connectée, mais nous pouvons l'améliorer légèrement pour le moment.
Après avoir cliqué sur Ajouter un élément, vous devez toujours cliquer dans la zone de texte avant de saisir une étape inutile,
car l'ouverture du modèle implique déjà que l'utilisateur souhaite saisir un neutre.
Cependant, nous pouvons facilement résoudre ce problème en ajoutant immédiatement après avoir affiché le focus de l'URL de l'élément de modèle.
Et là, la saisie de texte est focalisée dès l'ouverture du modèle, une amélioration simple mais significative.
Une autre amélioration de ce type serait de permettre à l'utilisateur de soumettre un élément en appuyant sur Entrée.
Pour le moment, rien ne se passe lorsque j'appuie sur Entrée pour enregistrer un autre clic manuel sur le bouton Ajouter un élément.
Il est très important de garder à l'esprit ces petites considérations sur la façon dont les utilisateurs ont tendance à interagir avec les applications.
De retour dans Dodges, nous pouvons écouter un événement clé sur cette entrée.
L'URL de l'élément étant la clé d'écoute d'ajout d'événement d'entrée en place lorsque l'utilisateur relâche la clé pour une clé telle que la touche Entrée
vers le bas sera également bien.
Cela se déclenchera sur n'importe quelle clé relâchée.
Vérifiez donc l'entité avec si e point clé cet objet événement équivaut à enter.
Dans ce cas, cliquez sur le bouton d'ajout d'élément.
Ouvrez le modèle et entrez quelque chose que mon domaine entre et nous obtenons le même journal dans la console car nous cliquons essentiellement sur
ce bouton pour l'utilisateur lorsqu'il appuie sur Entrée, nous sommes maintenant prêts à commencer à ajouter des éléments
soumis.
Je vais donc supprimer ce message de journal et rendre cela un peu plus facile.
Construisons le HTML qui représentera un tel élément.
Je vais simplement ajouter un élément statique directement dans le conteneur des éléments.
Une colombe qui vaut une classe d'élément lu en utilisant une classe cette fois-ci a également plusieurs éléments et ce que nous voulons tous
d'un tel élément, c'est le titre.
Ainsi, le titre de la page chargée par l'URL de l'élément et une vignette de la page, essentiellement
une capture d'écran commence avec la vignette à gauche de l'image de l'élément avec une source de test de https placée, maintenez-la 500
par 500.
Et une balise H2 pour le titre de l'élément ajouté.
Voilà, vraiment basique.
Nous pouvons ajouter du style à ces articles, un accès d'esprit ouvert.
Tout le chemin à la fin.
Ajoutez la classe d'objets Reid.
Affichez Fleck's.
Un centre d'éléments de campagne, idem pour le centre de contenu de Fleck, une bordure inférieure pour séparer ces éléments,
gris clair, deux pixels solides.
Avec un fond FFA légèrement blanc cassé et 10 pixels de taille de remplissage, l'élément, la vignette lit l'image de
l'élément.
Avec une valeur de 20%, une marge de 25 pixels à droite pour le séparer du titre, vérifiez cela jusqu'à présent,
rechargez et cela semble à peu près correct.
Assurez-vous que l'en-tête de notre application reste statique une fois que nous aurons plus d'éléments dans cet espace de fenêtre.
Je vais les dupliquer plusieurs fois.
Enregistrez, rechargez, faites défiler et il y a un problème.
Cette lettre doit rester fixe en haut ici avec le conteneur d'éléments ne prenant que l'espace restant en tant
que colonne flexible, j'ai défini le corps pour avoir un affichage de la colonne flex, ce qui signifie que les propriétés de croissance flex doivent être
définies sur la balise principale, pas sur les éléments .
Je changerai cela en main étant la balise soeur de l'en-tête, pas les éléments, et je lui donnerai également
un débordement de sauvegarde de défilement et réessayerai.
Là cette fois, cela fonctionne, l'élément body est une colonne flex, l'en-tête prend la quantité d'espace
nécessaire, puis la balise principale contenant les éléments et le message no items a une propriété flex grow
d'une signification occupant ce qui reste du corps.
Je vais me débarrasser de ces éléments jusqu'à ce que nous ajoutions un élément réel plus tard.
Réinitialiser les éléments dans un conteneur vide.
Ensuite, de retour à Jayesh, nous devrons envoyer l'euro du nouvel élément au processus principal, le processus principal récupérera l'élément,
la capture d'écran et le titre, le retournant au moteur de rendu où nous pouvons en créer
un élément et ajouter à l'appli.
Pour ce faire, il faudra bien sûr utiliser la messagerie époxy ou plus spécifiquement dans le processus de rendu.
L'envoi de rendu époxy nécessite ce module.
Le rendu ipsi const utilisant l'assignation de destruction est égal à exiger l'électron.
Définissez un nom de chaîne sur celui-ci sur le nouvel élément, en envoyant l'URL du nouvel élément, la valeur de point de l'URL.
C'est tout ce qu'il faut pour envoyer l'article.
Donc plus de deux dossiers principaux où l'on peut écouter sur ce canal un nouvel élément, nécessitant d'abord
IPSI Main, le processus principal équivalent de IPSI Renderer à l'écoute dans le périmètre global.
Ce n'est pas important pour une nouvelle demande d'article.
IPC principal sur ce canal nommé élément, votre URL est envoyée.
Nouvel élément, un rappel fournissant l'objet événement et les données envoyées. Elément Corlett neutre dans ce cas, que je
vais à nouveau déconnecter pour le moment.
L'application redémarre, alors ajoutez un nouvel élément, entrez mon domaine dot com, vérifiez le terminal pour le journal de processus principal
et nous l'avons.
Nous envoyons donc avec succès l'élément de votre URL au processus principal où nous pouvons maintenant obtenir le nouvel élément et
le renvoyer au moteur de rendu, la récupération réelle du nouvel élément se fera dans la prochaine leçon.
Donc pour l'instant, je vais juste simuler le poids que cela prendra avec un temps sur deux secondes pour renvoyer à
l'expéditeur de ce message, chaque émetteur de point étant le centre de cet événement.
Nouvel élément réussi, le nom du canal sur lequel écoutera les éléments renvoyés dans le moteur de rendu.
Nouvel élément du processus principal, une chaîne simple pour l'instant jusqu'à ce que nous l'implémentions au niveau de l'auditeur correspondant sur le moteur
de rendu.
Écoutez le nouvel élément du processus de fabrication.
Vaut le rendu ipsi sur ce canal de réponse, le succès du nouvel élément, le même rappel que dans le processus principal, l'événement et
les données du module IPC ou le nouvel élément étant cette simple chaîne pour le moment.
Alors déconnectez-vous.
Enregistrez ces deux fichiers.
En ajoutant mon domaine dot com, rappelez-vous, cela sera maintenant envoyé au processus principal et après deux secondes,
nous aurons une réponse, entrez.
Et leur nouvel élément du processus principal, donc tout va bien, nous avons maintenant une communication bidirectionnelle en place, mais pour le
moment, pendant le temps qu'il faut au processus principal pour récupérer l'élément ou dans notre cas, pour
l'instant, pendant ces deux deuxième fois, ce bouton peut être cliqué encore et encore, ce qui entraîne des éléments en double
ou même un verrouillage si l'utilisateur clique dessus suffisamment de fois.
Donc, pour informer l'utilisateur que cet élément est en cours de récupération et d'ajout, nous
devrons fournir des commentaires visuels et désactiver le bouton d'ajout.
Réactivez cela seulement une fois que le nouvel élément est de retour du processus principal et que tout est terminé.
Pour ce faire, je vais créer une fonction réutilisable, désactiver et activer les boutons modaux, une bascule, pour ainsi dire.
Assignez cette fonction pour basculer les boutons modaux comme une fonction.
La première chose à faire pour basculer un bouton serait de savoir s'il est actuellement activé ou désactivé.
Alors vérifiez l'état.
Si un élément.
Non désactivé équivaut à la vraie signification, il est désactivé et nous devons le réactiver, sinon cela signifie qu'il est
activé et doit être désactivé.
Je vais commencer par ceci car le premier rétablira l'état du bouton
à ce que nous avons actuellement dit, l'élément publicitaire est désactivé pour essayer de rendre le bouton légèrement transparent, pour mieux
montrer l'état au style de l'utilisateur, pas l'opacité équivaut à aucun point cinq ou 50 pour cent.
Changer le texte du bouton en une étiquette plus appropriée dans un texte équivaut à ajouter rappelez-vous que cet état désactivé est que lorsqu'un élément
est envoyé au processus principal et est attendu dans le moteur de rendu, nous pouvons également
masquer le bouton d'annulation.
Inutile de demander à l'utilisateur de fermer le modèle pendant qu'un article est en cours de récupération.
L'affichage des points de style de point de modèle fermé est égal à aucun.
Je vais copier tous les paramètres dans la première condition.
Où les ramènera à leur état d'origine.
Désactivé la fausse opacité.
Texte d'un bouton pour ajouter un élément et afficher le bouton d'annulation avec affichage en ligne de sa propriété d'affichage par
défaut.
Copiez cette fonction en l'appelant immédiatement après l'envoi d'une nouvelle demande d'élément au processus principal qui désactivera les
boutons, basculera les boutons modaux, puis à nouveau après avoir reçu le nouvel élément du processus principal, ce qui réactivera bien
sûr les boutons, nous peut également à ce stade masquer le modèle et effacer la valeur
d'entrée, le gardant prêt pour un autre nouvel élément à ajouter.
Identique au fait de cliquer sur le bouton Annuler pour indiquer que les éléments du modèle ne s'affichent pas et que la
valeur Earles revient à une chaîne vide.
Cliquez pour ajouter un nouvel élément.
Mon article, dotcom, a remarqué le bouton.
Maintenant, lorsque je soumets cette entrée et que je la désactiverai avec la fermeture modale, dès que ce nouvel élément
est reçu du processus principal, rouvrez-le et il est prêt pour une nouvelle URL d'élément avec le bouton activé
et l'entrée d'URL vide dans.
La prochaine leçon implémentera le moteur de rendu hors écran pour créer ce nouvel élément à partir d'Ertuğrul.